---
image: /generated/articles-docs-tailwind-v4-overview.png
id: overview
sidebar_label: Overview
title: '@remotion/tailwind-v4'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import {ExperimentalBadge} from '../../components/Experimental';
import {TableOfContents} from './TableOfContents';

This package provides utilities useful for integrating [TailwindCSS v4](https://tailwindcss.com/) with Remotion, as documented on our [TailwindCSS](/docs/tailwind) page.

## Installation

Install `@remotion/tailwind-v4` as well as TailwindCSS dependencies.

<Installation pkg="@remotion/tailwind-v4" />

<br />

[Override the Webpack config](/docs/webpack) by using [`enableTailwind()`](/docs/tailwind/enable-tailwind).

```ts twoslash title="remotion.config.ts"
import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});
```

Then follow the remaining set up steps from the [TailwindCSS](/docs/tailwind) page.

## APIs

<TableOfContents />
